<template>
	<view class="exchangePage">
		<!-- banner -->
		<view class="banner">
			<image :src="data.bannerUrl" mode="aspectFit"></image>
		</view>
		
		<!-- 白色带圆角区域 -->
		<view class="exchangeMain">
			<!-- 上面-三张卡 -->
			<view class="exchangeMainTop" >
				<image
					v-for="(item,index) in data.cardList"
					:key="item.id"
					:src="item.carUrl" 
					@tap="goToexchangeDetails(item.id, item.type)"
					mode="aspectFit">
				</image>
			</view>
		</view>
		
		<!-- 央国企求职痛点-广告图-容器 -->
		<view class="exchangeMainBottom">
			<!-- 广告图 -->
			<view 
				class="exchangeMainBottomImg"
				v-for="(item,index) in data.cardConList"
				:key="index"
			>
				<image :src="item.url" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref} from "vue";
	
	const data = ref({
		bannerUrl:"/static/exchangePage/exchangeBanner.png",
		cardList:[
			{id:1, carUrl:"/static/exchangePage/card1.gif", type:1},
			{id:2, carUrl:"/static/exchangePage/card2.gif", type:2},
			{id:3, carUrl:"/static/exchangePage/card3.gif", type:3}
		],
		cardConList:[
			{ url:"/static/exchangePage/cardConList_01.png" },
			{ url:"/static/exchangePage/cardConList_02.png" },
			{ url:"/static/exchangePage/cardConList_03.png" },
			{ url:"/static/exchangePage/cardConList_04.png" },
			{ url:"/static/exchangePage/cardConList_05.png" },
			{ url:"/static/exchangePage/cardConList_06.png" },
			{ url:"/static/exchangePage/cardConList_07.png" },
			{ url:"/static/exchangePage/cardConList_08.png" },
			{ url:"/static/exchangePage/cardConList_09.png" },
			{ url:"/static/exchangePage/cardConList_10.png" },
			{ url:"/static/exchangePage/cardConList_11.png" },
			{ url:"/static/exchangePage/cardConList_12.png" },
			{ url:"/static/exchangePage/cardConList_13.png" },
			{ url:"/static/exchangePage/cardConList_14.png" },
			{ url:"/static/exchangePage/cardConList_15.png" }
		]
	})  
	
	// 跳转【兑换中心】详情页
	const goToexchangeDetails = (id:any, type:any) =>{
		let bgColor = '';
		switch(type) {
		  case 1: bgColor = '#FF0000'; break; // 红色
		  case 2: bgColor = '#0b7fff'; break; // 绿色
		  case 3: bgColor = '#b157e0'; break; // 蓝色
		}
		
		// 同时传递 id 和 bgColor 参数
		uni.navigateTo({
			url:`/pages/exchangeDetails/exchangeDetails?id=${id}&bgColor=${encodeURIComponent(bgColor)}`
		})
	}
		
</script>

<style scoped>
/* 页面样式 */
.exchangePage {
	width: 100%;
	position: relative;
}

/* banner的容器 */
.banner {
	width: 100%;
}
/* banner样式 */
.banner image {
	width: 100%;
	height: 245rpx;
}
/* 白色带圆角的-容器 */
.exchangeMain{
	width: 100%;
	background: #fff;
	position: absolute;
	top:225rpx;
	left: 0;
	border-radius: 26rpx 26rpx 0 0;  /* 左上和右上圆角 */
	padding-bottom: 20rpx;
}
/* 上面-三张卡-容器 */
.exchangeMainTop {
	width: 100%;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 20rpx 0 20rpx;
}
.exchangeMainTop image {
	width: 350rpx;
	height: 220rpx;
	margin-bottom: 30rpx;
}
.exchangeMainTop image:last-child {
	margin-bottom: 0;
}
/* 央国企求职痛点-广告图 -容器*/
.exchangeMainBottom {
	width: 100%;
	position: absolute;
	top:744rpx;
	left: 0;
	background: #fff;
	padding-bottom: 80rpx;
}
.exchangeMainBottomImg {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
}

.exchangeMainBottomImg image {
	width: 100%;
	margin-right: -0.5px; 
	margin-bottom: -0.5px;
	transform: scale(1.005);
}

</style>
